<template>
  <div ref="main" style="background-color: #fff"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { chartDataThree } from "../../axios/http";
const main = ref();
const data = ref([
  {
    value: 0,
    name: "",
  },
]);
onMounted(async () => {
  // 请求数据
  const arr = await chartDataThree();
  console.log(arr.data);
  data.value = arr.data;
  // 图表
  init();
});
// 处理数据

function init() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(main.value);
  // 指定图表的配置项和数据
  let option = {
    legend: { top: "bottom" },
    tooltip: {},
    series: [
      {
        type: "pie",
        data: data.value,
        radius: [10, 100],
        center: ["50%", "45%"],
        roseType: "area",
      },
    ],
  };

  myChart.setOption(option);
}
</script>
<style scoped lang="less"></style>
